<template>
  <div>
    <!-- 头部 -->
    <div class="personal">
      <van-nav-bar title="我的" left-arrow @click-left="$router.back()">
      </van-nav-bar>
      <router-link to="/login">
        <div class="header">
          <img
            src="http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg"
            alt
          />
          <div class="center">
            <div>
              <span>{{ msg }}</span>
            </div>
            <div>暂无手机号码</div>
          </div>
          <span class="iconfont iconjiantou1"></span>
          <van-icon class="right" name="arrow" />
        </div>
      </router-link>
    </div>

    <!-- 内容部分 -->
    <div class="content">
      <div class="content_header">
        <div class="left">
          <span>0.00</span>元
          <p>我的余额</p>
        </div>
        <div class="centet_middle">
          <span>{{ num }}</span
          >个
          <p>我的优惠</p>
        </div>
        <div class="centet_right">
          <span>0</span>分
          <p>我的积分</p>
        </div>
      </div>
      <!-- 单元格 -->

      <van-cell icon="orders-o" title="我的订单" is-link />
      <van-cell icon="bookmark-o" title="积分商城" is-link />
      <van-cell icon="orders-o" title="饿了么会员卡" is-link />
      <van-cell class="serve" icon="orders-o" title="服务中心" is-link />
      <van-cell icon="orders-o" title="下载饿了么APP" is-link />
    </div>
    <!-- <div><button @click="outFn">退出</button></div> -->
    <div class="foot">
      <tabbar></tabbar>
    </div>
  </div>
</template>

<script>
import tabbar from "../conponents/tabbar.vue";
import { personal, login } from "../api/goods";
export default {
  components: {
    tabbar,
  },
  data() {
    return {
      msg: "登录/注册",
      num: 0,
      user_name: "18129804595",
      password: "123456",
      captcha_code: "1234",
    };
  },
  created() {
    //   登录
    login({
      user_name: this.user_name,
      password: this.password,
      captcha_code: this.captcha_code,
    }).then((res) => {
      console.log(69, res);
    });
    //   个人
    personal({
      user_name: this.user_name,
      password: this.password,
    }).then((res) => {
      console.log(64, res);
      if (res.data.success === "登录成功") {
        this.msg = this.user_name;
        this.num = 3;
      }
    });
  },
  //   methods: {
  //     outFn() {
  //       out().then((res) => {
  //         console.log(97, res);
  //       });
  //     },
  //   },
};
</script>

<style lang="less" scoped>
.personal .van-nav-bar {
  background-color: rgb(49, 144, 232);
  border-bottom: 1px solid #ccc;
}
/deep/.van-nav-bar__left > .van-icon {
  color: #fff;
}

/deep/.van-nav-bar__title {
  color: #fff;
  font-weight: 700;
}
.header {
  display: flex;
  background-color: rgb(49, 144, 232);
}
.header > img {
  margin: 10px 20px;
  width: (60 / 360) * 100vw;
  height: (60 / 360) * 100vw;
  border-radius: 50%;
}
.center {
  margin-top: 20px;
  color: #fff;
  span {
    font-size: 24px;
  }
}
.right {
  margin-top: 35px;
  margin-left: 170px;
}
.content_header {
  margin-bottom: 10px;
  display: flex;
  & > div {
    flex: 1;
    text-align: center;
    padding-top: 10px;
  }
}
/deep/.left span {
  color: rgb(255, 153, 0);
  font-size: 22px;
  font-weight: 700;
}
/deep/.centet_middle span {
  color: rgb(255, 96, 57);
  font-size: 22px;
  font-weight: 700;
}
/deep/.centet_right span {
  color: rgb(110, 196, 70);
  font-size: 22px;
  font-weight: 700;
}
.van-cell__right-icon {
  color: #ccc;
  //   margin-right: -20px;
}
.van-cell__left-icon {
  color: #ccc;
}
.serve {
  margin-top: 10px;
}
.content {
  background-color: #ddd;
}

.content_header {
  background-color: white;
}
.right {
  color: #fff;
}
</style>